<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>文章管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
            <div class="layer-top">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12" style="margin-top: 20px">

                        <input id="articleId" value="" style="display: none;">

                        <form class="layui-form" action="javascript:void(0);" lay-filter="example">

                            <input id="id" name="id" value="" style="display: none;">

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题:</label>
                                <div class="layui-input-block">
                                    <input name="title" type="text" placeholder="请填写入标题" class="layui-input" lay-verify="required" />
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">分类名称:</label>
                                <div class="layui-input-block" id="cateCheckbox">
                                    <input type="checkbox" name="categoryName" value="1" title="写作" lay-skin="primary" checked>
                                    <input type="checkbox" name="categoryName" value="2" title="发呆" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" value="3" title="禁用" lay-skin="primary" disabled>
                                    <input type="checkbox" name="categoryName" value="4" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" value="5" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" value="5" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="6试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                    <input type="checkbox" name="categoryName" title="测试" lay-skin="primary">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-col-md4">
                                    <label class="layui-form-label">状态:</label>
                                    <div class="layui-input-block">
                                        <input name="status" type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked>&nbsp;&nbsp;
                                    </div>
                                </div>
                                <div class="layui-col-md4">
                                    <label class="layui-form-label">是否置顶：</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="top" lay-filter="cate" value="1" title="是">
                                        <input type="radio" name="top" lay-filter="cate" value="0" title="否" checked>
                                    </div>
                                </div>
                                <div class="layui-col-md4">
                                    <label class="layui-form-label">是否原创：</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="original" lay-filter="cate" value="1" title="是" checked>
                                        <input type="radio" name="original" lay-filter="cate" value="0" title="否">
                                    </div>
                                </div>
                            </div>

                            <!--富文本编辑-->
                            <div class="layui-form-item">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-body">
                                            <textarea name="" id="edit" cols="30" rows="10"></textarea>
                                            <button style="display: none" id="content" class="layui-btn" lay-event="getContent">获取内容</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">封面图:</label>
                                    <div class="layui-input-block">
                                        <div class="layui-upload-drag" id="test10">
                                            <i class="layui-icon upload"></i>
                                            <p class="upload" >点击上传，或将文件拖拽到此处</p>
                                            <div class="layui-hide" id="uploadDemoView">
                                                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                            </div>
                                        </div>
                                        <input id="articleCover" name="articleCover" value="" style="display: none">
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <label class="layui-form-label">作者:</label>
                                    <div class="layui-input-block" style="width: 200px">
                                        <input name="author" placeholder="请填写入序号" value="煮酒听雨" class="layui-input" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item" style="display: none">
                                <div class="layui-col-md12">
                                    <button id="user-save" type="button" class="pear-btn pear-btn-success login" lay-submit
                                            lay-filter="login">
                                        保 存
                                    </button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
        <script src="../../js/baseUrl.js"></script>
        <script src="../../js/cookieUtils.js"></script>
        <script src="../../component/pear/module/ajaxRequest.js"></script>
        <script src="../../js/jquery-3.2.1.min.js"></script>
        <script src="../../js/permission.js"></script>
		<script>
			layui.use(['form', 'jquery', 'drawer', 'dropdown','ajaxRequest','toast','tinymce', 'layer','upload'], function() {
				let form = layui.form;
				let $ = layui.jquery;
                let ajaxRequest = layui.ajaxRequest;
                let toast = layui.toast;
                var tinymce = layui.tinymce;
                var upload = layui.upload;

                //拖拽上传
                upload.render({
                    elem: '#test10'
                    ,url: baseUrl + '/file/uploadFace?type=article' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,done: function(res){
                        console.log(res.data);
                        layer.msg('上传成功');
                        // $(".upload").hide();
                        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                        $("#articleCover").val(res.data);
                        console.log(res)
                    }
                });

                let edit;
                $(function () {

                    var articleId = $("#articleId").val();
                    // 如果文章ID不为空则加载文章信息
                    var res;
                    if (articleId) {
                        // 获取数据
                        res = ajaxRequest.sendPost("/admin/article/getBlogArticleById",{'id':articleId},false,true);
                        if (res){
                            var data = res.data;
                            if (data.status == 1){
                                data.status = true;
                            } else {
                                data.status = false;
                            }
                            form.val('example', data);
                            if (data.articleCover) {
                                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data.articleCover);
                            }
                        }
                    }

                    // 渲染富文本框
                    layui.code();
                    edit = tinymce.render({
                        elem: "#edit",
                        height: 380,
                        images_upload_url : baseUrl + '/file/uploadFace?type=article'
                    },function () {
                        if (res && res.data.content) {
                            edit.setContent(res.data.content);
                        }
                    });

                    // 加载选项数据
                    getCateList(articleId);

                });


				// 加载多选框
                function getCateList(articleId) {
                    var res = ajaxRequest.sendGet("/admin/category/getCategoryListNotPage",{'articleId':articleId},false,true);
                    var html = "";
                    if (res) {
                        var cateData = res.data;
                        $.each(cateData,function(index,element){
                            // console.log(element.id + "   " + element.name+ "   " + element.selected);
                            if (element.selected) {
                                html = html + "<input type=\"checkbox\" name=\"categoryName\" value=\""+element.id+"\" title=\""+element.name+"\" lay-skin=\"primary\" checked>"
                            }else{
                                html = html + " <input type=\"checkbox\" name=\"categoryName\" value=\""+element.id+"\" title=\""+element.name+"\" lay-skin=\"primary\">"
                            }
                        })
                    }
                    // console.log(html);
                    $("#cateCheckbox").html(html);
                    form.render();
                }

                // 弹出层的保存
                form.on('submit(login)', function(data) {
                    let formDate = data.field;
                    let id = formDate.id;
                    if (formDate.status == 'on'){
                        formDate.status = 1;
                    }else {
                        formDate.status = 0;
                    }

                    //获取复选框的值
                    let idArr = new Array();
                    let nameArr = new Array();
                    $("input:checkbox[name='categoryName']:checked").each(function(i){
                        idArr[i] = $(this).val();
                        nameArr[i] = $(this).attr("title");
                    });
                    formDate.categoryId = idArr.join(",");//将数组合并成字符串
                    formDate.categoryName = nameArr.join(",");//将数组合并成字符串

                    // 获取富文本框的值
                    formDate.content = edit.getContent();

                    // console.log(formDate);
                    // 地址
                    let result;
                    if (id) {
                        result = ajaxRequest.sendPost("/admin/article/updateBlogArticle",formDate,false,true);
                    }else {
                        result = ajaxRequest.sendPost("/admin/article/addBlogArticle",formDate,false,true);
                    }
                    // 结果处理
                    if (result) {
                        toast.success({title: 'Success',message: result.msg,position: 'topRight'});
                        // 清空填写的信息
                        form.val('example', {"id":"","title":"","articleCover":""});
                    }
                    return false;
                });

			})


            
		</script>
	</body>
</html>
